<link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<div class="hint-content" id="many_park_manager_edit_frame">
    <style>
        .step-content th {
            width: 100px;
        }
        .step-content td,.step-content th {
            padding: 5px;
            vertical-align: middle;
        }
        #continue-buttons button {
            color: #ffffff;
            border-radius: 3px;
            background-color: #0b83d1;
            padding: 10px 20px;
            border: none;
            transition: all linear .2s;
            margin: 0 17px;
            font-size: 16px;
        }
        #continue-buttons button:hover {
            box-shadow: 0px 2px 8px rgba(0,0,0, .75);
        }
        #continue-buttons button:active {
            box-shadow: 3px 3px 3px rgba(0,0,0, .62) inset;
        }
        .lonix.frame {
            padding: 11px;
        }
    </style>
    <section>
        <div class="step two" style="width: 880px;">
            <div class="step-heads">
                <div class="step-head" data-no="1">
                    <div class="step-title">用户信息</div>
                    <div class="step-desc">首先，您需要选择对应的车主</div>
                </div>
                <div class="step-head" data-no="2">
                    <div class="step-title">通行证基本信息</div>
                    <div class="step-desc">规定通行证的有效属性及类型</div>
                </div>
            </div>
            <div class="step-content" style="height: 600px;">
                <div class="step-content-item" data-on="1">
                    <div class="lonix frame" style="margin-top: 5px;">
                        <div class="lonix frame-title">车主信息</div>
                        <div class="lonix frame-content">
                            <table style="width:100%">
                                <tr>
                                    <th>车主编号：</th>
                                    <td style="position: relative; width: 300px;"><input class="search_owner_info" validationMessage="车主编号必填且不能包含特殊字符"  required pattern="^[\u4e00-\u9fa5A-Za-z0-9-_]*$" data-bind="value:ownerCode" style="border:none; padding:0px; position: absolute;bottom:0;left:0; width: 100%; height:100%; background-color: #eee;" /></td>
                                    <th>车主名称：</th>
                                    <td><span class="no-1-ownerName"></span></td>
                                </tr>
                                <tr>
                                    <th>所属组织：</th>
                                    <td><span class="no-1-organization"></span></td>
                                    <th>联系电话：</th>
                                    <td><span class="no-1-ownerPhone"></span></td>
                                </tr>
                                <tr>
                                    <th>联系地址：</th>
                                    <td colspan="3"><span class="no-1-ownerAddress"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!--<div style="width: 100%;">-->
                    <!--<div class="traffic_type">虚拟卡</div>-->
                    <!--<div class="traffic_type">IC卡</div>-->
                    <!--<div class="traffic_type">ID卡</div>-->
                    <!--<div class="traffic_type">二维码</div>-->
                    <!--<div class="traffic_type">扫脸</div>-->
                    <!--<div class="traffic_type">其他</div>-->
                    <!--</div>-->
                    <div class="lonix frame" style="padding: 20px;">
                        <div class="lonix frame-title">业务类型</div>
                        <div class="lonix frame-content" style="text-align: center">
                            <label class="master_card_radio" style="margin: 40px; font-size: 18px;">
                                <input type="radio" name="masterCardFlag" value="0" checked />
                                主卡
                            </label>
                            <label class="master_card_radio" style="margin: 40px; font-size: 18px;">
                                <input type="radio" name="masterCardFlag" value="1" />
                                副卡
                            </label>
                        </div>
                    </div>
                    <div class="lonix frame" id="master_card_info" style="display: none">
                        <div class="lonix frame-title">主卡信息</div>
                        <div class="lonix frame-content">
                            <table style="width: 100%">
                                <tr>
                                    <th>通行证编号：</th>
                                    <td style="position: relative; width: 280px;"><input id="search_master_card" style="border:none; padding:0px; position: absolute;bottom:0;left:0; width: 100%; height:100%;" /></td>
                                    <th>通行证类型：</th>
                                    <td><span id="no-1-trafficType"></span></td>
                                </tr>
                                <tr>
                                    <th>印刷号：</th>
                                    <td><span id="no-1-printingNo"></span></td>
                                    <th>车位数量：</th>
                                    <td><span id="no-1-spaceNumber"></span></td>
                                </tr>
                                <tr>
                                    <th>生效日期：</th>
                                    <td><span id="no-1-beginTime"></span></td>
                                    <th>截止日期：</th>
                                    <td><span id="no-1-endTime"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="button-frame">
                        <button class="next-step">下一步</button>
                    </div>
                </div>
                <div class="step-content-item" data-on="2">
                    <div class="lonix frame" style="margin-top:5px;">
                        <div class="lonix frame-title">车主信息</div>
                        <div class="lonix frame-content">
                            <table style="width:100%">
                                <tr>
                                    <th>车主编号：</th>
                                    <td class="no-1-ownerCode" style="position: relative; width: 300px;"><input validationMessage="必填且不能包含特殊字符"  required pattern="^[\u4e00-\u9fa5A-Za-z0-9-_]*$" data-bind="value:ownerCode" class="search_owner_info" style="border:none; padding:0px; position: absolute;bottom:0;left:0; width: 100%; height:100%; background-color: #eee;" /></td>
                                    <th>车主名称：</th>
                                    <td><span class="no-1-ownerName"></span></td>
                                </tr>
                                <tr>
                                    <th>所属组织：</th>
                                    <td><span class="no-1-organization"></span></td>
                                    <th>联系电话：</th>
                                    <td><span class="no-1-ownerPhone"></span></td>
                                </tr>
                                <tr>
                                    <th>联系地址：</th>
                                    <td colspan="3"><span class="no-1-ownerAddress"></span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <h3 style="float: left; width: 50%; text-align: center">设备信息：<span id="deviceStatus" style="color:red;">未检测到设备</span></h3>
                    <h3 style="float: left; width: 50%; text-align: center">卡信息：<span id="readCardStatus" style="color:red;">未读取到卡信息</span></h3>
                    <div class="lonix frame" style="float:left; width: 810px; margin-top:5px;">
                        <div class="lonix frame-title">通行证信息</div>
                        <div class="lonix frame-content">
                            <table style="width: 70%; float:left;" id="need_commit_table">
                                <tr>
                                    <th>通行证编号：</th>
                                    <td colspan="3" style="position: relative;"><input disabled type="text" style="position: absolute; top:0; width: 100%; left:0; right:0; border:none; text-align: center" class="k-textbox" placeholder="*系统自动生成*" data-bind="value:uniqueIdentifier" /></td>
                                </tr>
                                <tr>
                                    <th>通行证卡别：</th>
                                    <td><input type="text" id="category" data-bind="value:trafficPermitCategory" /></td>
                                    <th>通行证类型：</th>
                                    <td><input type="text" id="trafficType" data-bind="value:crTrafficPermitType" /></td>
                                </tr>
                                <tr>
                                    <th>发行时间：</th>
                                    <td><input type="text" id="beginTime" required validationMessage="发行时间必填且只能为标准格式"
                                                pattern="^\d{4}(-|\/|.)\d{1,2}\1\d{1,2}$" data-bind="value:beginTime" /></td>
                                    <th>有效时间：</th>
                                    <td>
                                        <input type="text" id="selectMonth" data-bind="value:selectMonth" style="width: 85px;">
                                    </td>
                                </tr>
                                <tr>
                                    <th>截止时间：</th>
                                    <td><input disabled type="text" bdPicker="format:'yyyy/M/d' "  id="endTime" data-bind="value:endTime" /></td>
                                </tr>
                                <tr>
                                    <th>车位数量：</th>
                                    <td><input class="k-textbox" type="text" required validationMessage="车位数量必填且只能为数字"
                                               pattern="^[0-9]*$" id="spaceNumber" data-bind="value:spaceNumber" /></td>
                                    <th>车牌号：</th>
                                    <td><input class="k-textbox" type="text" required validationMessage="车牌必填且不能包含特殊字符"
                                               pattern="^[\u4e00-\u9fa5A-Za-z0-9-_]*$" id="vehicleNo" data-bind="value:vehicleNo" /></td>
                                </tr>
                                <tr id="trafficEntityCardParam">
                                    <th>物理卡号：</th>
                                    <td><input class="k-textbox" disabled id="phyid" type="text" data-bind="value:physicNumber" /></td>
                                    <th>逻辑编号：</th>
                                    <td><input class="k-textbox" disabled id="rationUniqueIdentifier" type="text" data-bind="value:rationUniqueIdentifier" /></td>
                                </tr>
                                <tr id="printingNoParam">
                                    <th>印刷号：</th>
                                    <td><input style="width: 100%;" class="k-textbox" id="printingNo" type="text" data-bind="value:printingNo" /></td>
                                    <th>读卡器：</th>
                                    <td>
                                        <input type="text" id="device" data-bind="value:device" style="width: 100px;" />
                                        <a data-bind="click:check_device">图标</a>
                                    </td>
                                </tr>
                                <tr id="readCard">

                                </tr>
                                <tr id="discount">
                                    <th>包期优惠：</th>
                                    <td><input type="text" id="preferential" /></td>
                                    <th>收费金额：</th>
                                    <td><input style="border: 2px solid crimson; padding: 6px; transition:all linear .2s;" id="balance" type="text" data-bind="value:balance" maxlength="10" required
                                               validationMessage="金额只能为数字"
                                               pattern="^[0-9]*$" value="0" onfocus="this.style.backgroundColor = '#eee'" onblur="this.style.backgroundColor = '#fff'" /></td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <div id="finalMoney" style="display: inline-block; float: right">
                                            原需缴纳金额<span id="sourceMoney"></span>元&nbsp;
                                            <span id="calc" style="color: red"></span>
                                            <span style="color: green">最终需缴纳金额为：￥</span>
                                            <span id="resultMoney" style="font-size:24px; color: darkgreen"></span>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <div style="width: initial; margin-left: 15px; display: inline-block; border: 1px solid #ccc; float:left;">
                                <div class="title">通行权限</div>
                                <ul id="permit_tree" style="height: 300px; width: 200px; overflow-x: hidden; overflow-y: scroll" class="ztree"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="button-frame">
                        <span>请先仔细核对信息</span>
                        <button class="prev-step">上一步</button>
                        <a href="javascript:void(0)" class="finish-step" data-bind="click:save_info">确认发卡</a>
                        <a href="javascript:void(0)" class="finish-step" data-bind="click:save_and_continue">发卡后继续</a>
                        <a href="javascript:void(0)" class="finish-step" data-bind="click:save_and_subcard">发卡后继续开设副卡</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript" src="js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.excheck.js"></script>
<script>

    var manyParkManagerEdit = new ManyParkManagerEdit($('#many_park_manager_edit_frame'));
    $('button.prev-step').bind('click', function(e) {
        var no = $(this).parents('.step-content-item').attr('data-on');
        $('.step-head[data-no="'+(--no)+'"]').click();
    });
    $('button.next-step').bind('click', function(e) {
        var no = $(this).parents('.step-content-item').attr('data-on');
        $('.step-head[data-no="'+(++no)+'"]').click();
    });
    $('.step-head').bind('click', function(e) {
        if ($(this).hasClass('active')) {
            return;
        }
        var no = $(this).attr('data-no');
        $('.step-head').removeClass('active');
        $('.step-head').removeClass('completed');

        $(this).prevAll().addClass('completed');
        $(this).addClass('active');
        $('.step-content .step-content-item').fadeOut(200);
        $('.step-content .step-content-item[data-no="'+no+'"]').fadeIn(200);
    });
    if ($('.step-head.active').length < 1) {
        $('.step-head:eq(0)').click();
    }
    $('.master_card_radio').bind('click', function() {
        if ($(this).find('input').val() == "0") {
            $('#master_card_info').fadeOut(150);
        } else {
            $('#master_card_info').fadeIn(150);
        }
    });
    $('.lonix.frame-title').bind('click', function(e) {
        $(this).parent().find('.lonix.frame-content').slideToggle(150);
    });
    var numberArrayForChargesLog = "0123456789.";
    $('#many_park_manager_edit_frame #balance').bind('keydown', function(e) {
        if (numberArrayForChargesLog.indexOf(e.key) == -1 && e.key != 'Backspace') {
            e.returnValue = false;
            return false;
        }
    }).bind('keyup', function(e) {
        var $val = $(this).val();
        if ($val == '') {
            $(this).val(0);
        }
        $val = $(this).val();
        if ($val.charAt(0) == '0' && $val.length > 1) {
            $(this).val($val.substring(1));
        }
        $val = $(this).val();
        if ($val.charAt(0) == '.') {
            $(this).val('0'+$val);
        }
        $val = $(this).val();
        if ($val.indexOf('.') != -1) {
            var a = $val.indexOf('.');
            var b = $val.lastIndexOf('.');
            if (a != b) {
                $(this).val($val.substring(0, $val.length-1));
            }
            $val = $(this).val();
            if ($val.indexOf('.') != -1) {
                /* 如果输入为小数，则保留最后2位 */
                var temp = $val.substring($val.indexOf('.')+1);
                if (temp.length > 2) {
                    temp = temp.substring(0, 2);
                    $val = $val.substring(0, $val.indexOf('.'));
                    $val = $val + '.' + temp;
                    $(this).val($val);
                }
            }
        }
        $('#many_park_manager_edit_frame #sourceMoney').html($(this).val());
        manyParkManagerEdit.calcMoney();
    });
</script>